<template>
  <div class="infoWrapper f-zhong">
    <div class="content">
      <div class="head f-bian">
        <div class="left"><span class="iconfont icon-ren"></span> {{handleData.title}}</div>
        <div class="right flex">
          <div @click="do_close('save')"><span class="iconfont icon-round-check"></span> 保存</div>
          <div v-if="!handleData.isDelete" @click="do_close('increase')"><span class="iconfont icon-xinzeng" ></span> 保存并新增</div>
          <span @click="do_close('close')" class="iconfont icon-Close"></span>
        </div>
      </div>
      <div class="body">
        <!--<div>-->
          <div class="flex" v-if="handleData.isManager">
            <span>管理员：</span>
            <!--<div class="bodyR"> {{handleData.manager}}</div>-->
            <div class="bodyR">  <input type="text" v-model="handleData.manager"></div>

          </div>
          <div class="flex" v-if="handleData.isTel">
            <span>电话：</span>
            <!--<div class="bodyR"> {{handleData.tel}}</div>-->
            <div class="bodyR">  <input type="text" v-model="handleData.tel"></div>
          </div>
        <!--</div>-->

        <div class="flex" v-if="handleData.num">
        <span>编号：</span>
        <div class="bodyR"> {{handleData.num}}</div>
      </div>
        <div class="flex" v-if="handleData.isCity">
          <span>所属市州：</span>
          <div class="bodyR select" @click.stop.prevent="do_select('city')">
            <span>{{city}}</span> <span class="iconfont icon-xiala"></span>
            <ul class=" ul" v-show="cityShow">
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','city')">7897</li>
            </ul>
          </div>
        </div>
        <div class="flex" v-show="handleData.isQuXian">
          <span>所属区县：</span>
          <div class="bodyR select" @click.stop.prevent="do_select('quXian')">
            <span>{{quXian}}</span><span class="iconfont icon-xiala"></span>
            <ul class=" ul" v-show="quXianShow">
              <li @click.stop.prevent="do_isSelected('7898','quXian')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','quXian')">7897</li>
              <li @click.stop.prevent="do_isSelected('7898','quXian')">7897</li>
            </ul>
          </div>
        </div>
        <div class="flex" v-show="handleData.isSchool">
          <span>学校名称：</span>
          <div class="bodyR"><input type="text " placeholder="学校名称"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "cm_selectUnit",
      data(){
          return{
            city:"成都",
            quXian:"高新区",
            cityShow:false,
            quXianShow:false,

          }
      },
      props:{
        handleData:Object
      },
      methods:{
        do_close(item){

          switch (item){
            case 'save':
              alert("保存")
              break;
            case 'increase':
              alert("新增并保存")
              break;
            case 'close':
              this.$emit( "do_close","关闭")
              break;
          }
        },
        do_select(item){
          if(item=="city"){
            this.cityShow=true
          }
          if(item=="quXian"){
            this.quXianShow=true
          }
        },
        do_isSelected(item,item2){
if(item2=="city"){
  this.city=item
  this.cityShow=false
}
          if(item2=="quXian"){
            this.quXian=item
            this.quXianShow=false
          }
        }
      }
    }
</script>

<style scoped>
  .infoWrapper{
    position: absolute;
    width: 100%;
    top: 0;
    bottom: 0;
    z-index:888;
    background-color: rgba(0,0,0,.5);
  }
  .infoWrapper .content{
    width: 400px;
    height: 370px;
    background-color: white;
  }
  .infoWrapper .content .head{
    height: 50px;
    line-height: 50px;
    background-color: #4092FD;
    color: white;
    padding: 0 15px;
  }
  .infoWrapper .content .head .right>div{
    margin-right: 15px;
    cursor: pointer;

  }
  .infoWrapper .content .head .right>div span, .infoWrapper .content .head .right>div {
    font-size: 14px;
  }
  .infoWrapper .content .head .right>span{
    font-size: 14px;
    cursor: pointer;
    position: relative;
    top: -2px
  }
  .infoWrapper .content .head .iconfont{
    font-size: 16px;
  }
  .body{
    padding: 20px 15px;
  }
  .body>div{
    height: 40px;
    line-height: 40px;
    align-items: center;
  }
  .body>div>span{
    width: 90px;
    text-align: right;
    color: #747474;
  }
  .body>div>div{
    width: 200px;
    height: 30px;
    border: 1px solid #D9D9D9;
    line-height: 30px;
    box-sizing: border-box;
    position: relative;
  }
  .body>div>div input{
    width: 100%;
    height: 28px;
    line-height: 28px;
    border: none;
    outline: none;
    position: relative;
    top: -1px;
  }
  .select{
    cursor: pointer;
  }
  .icon-xiala{
    position: absolute;
    right: 8px;
    font-size: 12px;
   color: #999999;
  }
  .ul {
    position: relative;
    top: -2px;
    width: 200px;
    left: -1px;
    z-index: 889;
    background-color: white;
    border: 1px solid #D9D9D9;
    max-height: 150px;
    overflow: auto;
  }
  .ul li{
    height: 30px;
    line-height: 30px;
    border-bottom: 1px solid #D9D9D9;

  }
  .ul li:last-child{
    border: none;
  }
</style>
